<#assign menuId=12>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>角色编辑-${Application.systemName!}</title>
<meta
	content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no'
	name='viewport'>
<!-- bootstrap 3.0.2 -->
<link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- font Awesome -->
<link href="../css/font-awesome.min.css" rel="stylesheet"
	type="text/css" />
<!-- Ionicons -->
<link href="../css/ionicons.min.css" rel="stylesheet" type="text/css" />
<!-- Theme style -->
<link href="../css/AdminLTE.css" rel="stylesheet" type="text/css" />

<link href="../css/myself.css" rel="stylesheet" type="text/css" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
          <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->
<style type="text/css">
.table tr td:nth-child(2), .table tr th {
	text-align: center; 
}
.table tr th:nth-child(3) {
	text-align: left;
}
.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td {
			    vertical-align: middle;
			} 
.form-group {
	margin-bottom: 0;
}
</style>

</head>

<body class="skin-blue">
	<!-- header logo: style can be found in header.less -->
	<#include "../header.html"/>
	<div class="wrapper row-offcanvas row-offcanvas-left">
		<!-- Left side column. contains the logo and sidebar -->
		<#include "../menu.html"/>
		<!-- Right side column. Contains the navbar and content of the page -->
		<aside class="right-side">
			<section class="content-header">
				<h1>角色编辑</h1>
				<hr style="margin: 10px 0 0 0" />
			</section>
			<!-- Main content -->
			<section class="content">
				<div class="row"> 
					<div class="col-md-12 box" style="padding: 20px">
						<div class="box-body">
							<form class="form-horizontal" id="form">
								<table class="table table-bordered center" style="margin-bottom: 10px;"> 
									<tr>
										<td width="7%" style="text-align: center;"><span>账号</span></td> 
										<td width="93%">
											<div class="form-group">
												<div class="col-sm-3">
													<input type="email" class="form-control" value="${sysRole.name!}" id="email" name="email" placeholder="账号">
												</div>
											</div>
										</td>
									</tr>
									<tr>
										<td style="text-align: center;"><span>备注</span></td>
										<td>
											<div class="form-group">

												<div class="col-sm-12">
													<textarea class="form-control" id="memo" name="memo"
														rows="3">${sysRole.memo!}</textarea>
												</div>
											</div>
										</td>

									</tr>
								</table>
								<table class="table table-bordered center">
									<tr>
										<td width="7%" style="text-align: center;"><a href="#">选择</a></td>
										<td width="7%" style="text-align: center;"><a href="#">模块名称</a></td>
										<td width="86%"><a href="#">子权限</a></td>
									</tr>
									<#list resourceList as resource> <#if
									resource.category?length==3>
									<tr>
										<td style="text-align: center"><input type="checkbox"
											name="resources" value="${resource.id}" /></td>
										<td class="col-md-1">${resource.name!}</td>

										<td>

											<div class="checkbox">
												<#list resourceList as resource1> <#if
												(resource1.category?substring(0,3)==resource.category) &&
												resource1.category?length gt 3> <label> <input
													type="checkbox" name="resources"  value="${resource1.id}">${resource1.name!}
												</label> </#if> 
												</#list>
											</div>


										</td>

									</tr>
									</#if> </#list>
								</table>
								<script type="text/javascript">
                                    var objs = document.getElementsByName("resources");
                                    for(var i =0;i<objs.length;i++){
                                    	<#list roleResourceList as roleResource>
                                    	if(objs[i].value==${roleResource.id}){
                                    
                                    		objs[i].checked = "checked";
                                    	}
                                    	</#list>
                                    }
                                    </script>
								<div class="box-footer center no-padding" style="margin-top:10px">
									<button type="button" class="btn btn-primary">保存</button>
									<button type="button" class="btn btn-default"
										onclick="window.location.href='list'">返回</button>
								</div>


							</form>



						</div>
						<!-- /.box-body -->

						<!-- /.box-footer -->

					</div>

					<!-- /.box -->

				</div>
			</section>
			<!-- /.col -->



		</aside>
	</div>
	<!-- /.row -->


	<!-- /.content -->

	<!-- /.right-side -->
	</div>
	<!-- ./wrapper -->

	<!-- jQuery 2.0.2 -->
	<script src="../js/jquery.min.js"></script>
	<!-- Bootstrap -->
	<script src="../js/bootstrap.min.js" type="text/javascript"></script>
	<!-- AdminLTE App -->
	<script src="../js/AdminLTE/app.js" type="text/javascript"></script>
	<script src="../js/jquery.form.min.js"></script>
	<script type="text/javascript">
        $(document).ready(function(){
        	  $(".btn-primary").click(function(){
        		  
        		  $("#form").ajaxSubmit({  
      	            type : "POST",  
      	          	url: "save?id=${sysRole.id}", 
      	       
      	            dataType : "json",  
      	            contentType : 'application/x-www-form-urlencoded; charset=UTF-8',  
      	            success : function(map) {  
      	            	
      	                if(map.body=="success"){
      	                	alert("保存成功");
      	                }else{
      	                	alert(map.body);
      	                }
      	            },  
      	            error : function(map) {  
      	                alert(map.responseText);  
      	            }  
      	  
      	        }) 
        	  });
        	  
        		
        		
        		
        	});
       
        </script>
</body>

</html>